<template>
	<view class="application_container">
		<!-- 标题 -->
		<view class="mail_two">
			<view class="mail_text" style="font-weight: 700;">
				应用
			</view>
		</view>
		<view class="free" style="position: relative;">
			<image src="../../static/workOrder/MaskGroup.png" mode="" style="width: 100%; height: 300rpx;"></image>
			<view style="height: 106rpx;">
				<view class="topBox">
					<view class="notice" style="text-align: center;" @click="Notice">
						<view class="" style="height: 80rpx;">
							<image src="../../static/workOrder/Group1195.png" mode=""
								style="width: 70rpx; height: 70rpx;"></image>
						</view>
						<view class="" style="height: 32rpx;  font-size: 24rpx; ">
							通知公告
						</view>
					</view>
					<view class="notice" style="text-align: center;" @click="activities">
						<view class="" style="height: 80rpx; ">
							<image src="../../static/workOrder/Group1196.png" mode=""
								style="width: 70rpx; height: 70rpx;"></image>
						</view>
						<view class="" style="height: 32rpx;  font-size: 24rpx;">
							社区活动
						</view>
					</view>
					<view class="notice" style="text-align: center;" @click="member">
						<view class="" style="height: 80rpx; ">
							<image src="../../static/workOrder/Group1198.png" mode=""
								style="width: 70rpx; height: 70rpx;"></image>
						</view>
						<view class="" style="height: 32rpx;  font-size: 24rpx;">
							党员活动
						</view>
					</view>
					<view class="notice" style="text-align: center;" @click="building">
						<view class="" style="height: 80rpx; ">
							<image src="../../static/workOrder/Group1280.png" mode=""
								style="width: 70rpx; height: 70rpx;"></image>
						</view>
						<view class="" style="height: 32rpx;  font-size: 24rpx;">
							党建资讯
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 物业服务 -->
		<view class="data_Statistics" style="padding: 40rpx 23rpx 0 23rpx;">
			<text style="font-weight: 700; font-size: 30rpx; color: #1890FF;">丨</text><text
				style="font-weight: 700; font-size: 30rpx;">物业服务</text>
		</view>
		<view class="property">
			<view class="monitor" @click="onlineMonitoring">
				<view class="">
					<image src="../../static/workOrder/Group1182.png" mode="" style="width: 60rpx; height: 60rpx;">
					</image>
				</view>
				<view class="" style="font-size: 22rpx; color: #666666;">
					在线监控
				</view>
			</view>
			<view class="monitor" @click="earlyWarning">
				<view class="">
					<image src="../../static/workOrder/Group1183.png" mode="" style="width: 60rpx; height: 60rpx;">
					</image>
				</view>
				<view class="" style="font-size: 22rpx; color: #666666;">
					设备预警
				</view>
			</view>
			<view class="monitor" @click="decoration">
				<view class="">
					<image src="../../static/workOrder/Group1184.png" mode="" style="width: 60rpx; height: 60rpx;">
					</image>
				</view>
				<view class="" style="font-size: 22rpx; color: #666666;">
					装修管理
				</view>
			</view>
		</view>
		<!-- 信息查询 -->
		<view class="data_Statistics" style="padding: 40rpx 23rpx 0 23rpx;">
			<text style="font-weight: 700; font-size: 30rpx; color: #1890FF;">丨</text><text
				style="font-weight: 700; font-size: 30rpx;">信息查询</text>
		</view>
		<view class="information_service">
			<view class="owner" @click="owner">
				<view class="owner_picture">
					<image src="../../static/workOrder/Group1205.png" mode="" style="width: 68rpx; height: 68rpx;">
					</image>
				</view>
				<view class="owner_text" style="font-size: 22rpx;">业主信息</view>
			</view>
			<view class="owner" @click="tenant">
				<view class="owner_picture">
					<image src="../../static/workOrder/Group1208.png" mode="" style="width: 68rpx; height: 68rpx;">
					</image>
				</view>
				<view class="owner_text" style="font-size: 22rpx;">租客信息</view>
			</view>
			<view class="owner" @click="visitor">
				<view class="owner_picture">
					<image src="../../static/workOrder/Group1207.png" mode="" style="width: 68rpx; height: 68rpx;">
					</image>
				</view>
				<view class="owner_text" style="font-size: 22rpx;">访客信息</view>
			</view>
			<view class="owner" @click="vehicle">
				<view class="owner_picture">
					<image src="../../static/workOrder/Group1206.png" mode="" style="width: 68rpx; height: 68rpx;">
					</image>
				</view>
				<view class="owner_text" style="font-size: 22rpx;">车辆管理</view>
			</view>
			<view class="owner" @click="records">
				<view class="owner_picture">
					<image src="../../static/workOrder/Group1209.png" mode="" style="width: 68rpx; height: 68rpx;">
					</image>
				</view>
				<view class="owner_text" style="font-size: 22rpx;">人行记录</view>
			</view>
		</view>
		<!-- 物品管理 -->
		<view class="data_Statistics" style="padding: 40rpx 23rpx 0 23rpx;">
			<text style="font-weight: 700; font-size: 30rpx; color: #1890FF;">丨</text><text
				style="font-weight: 700; font-size: 30rpx;">物品管理</text>
		</view>
		<view class="management">
			<!-- <view class="goods"> -->
			<image src="../../static/workOrder/Group1248.png" mode="" @click="goOut"></image>
			<!-- </view> -->
			<!-- <view class="goods"> -->
			<image src="../../static/workOrder/Group1247.png" mode="" @click="itemBorrowing"></image>
			<!-- </view> -->
		</view>
		<!-- 弹框 -->
		<u-toast ref="uToast" />
		<!-- 提示去登录 -->
		<u-modal v-model="show" show-cancel-button="true" cancel-color="#2979ff" :content="content" @confirm="confirm">
		</u-modal>
		<!-- template部分，u-tabBar放在页面展现最后 -->
		<!-- <u-tabbar :list="tabBarList" :active-color="activeColor" :inactive-colot="inactiveColor"></u-tabbar> -->
		<!-- tabBar -->
		<tabBar v-if="flag"></tabBar>
	</view>
</template>

<script>
	import tabBar from "@/components/tabBar/tabBar.vue"
	import {
		mapGetters
	} from 'vuex'
	export default {
		components:{
			tabBar
		},
		data() {
			return {
				activeColor: "#55a0ff", // 选中时的颜色
				inactiveColor: "#000", // 未选中时的颜色
				// 模态框参数
				show: false,
				loginId:'',
				content: '当前未登录，是否去登录',
				flag:''
			}
		},
		// onLoad() {
		// },
		onShow() {
			this.flag = true
			this.getcoursetype()
			// 控制模态框
			// this.show=true
		},
		onHide() {
			this.flag = false
			// console.log('onHide')
		},
		computed: {
			...mapGetters([
				'tabBarList', // 获取展示的tabBar列表
			])
		},
		methods: {
			vehicle() {
				if (this.loginId=='') {
					this.show = true
				} else {
					// this.openUrl('/pagesB/my/personalAssets/personalAssets')
				this.openUrl('/pagesA/application/vehicleManagement/vehicleManagement')
				}
			},
			records() {
				if (this.loginId=='') {
					this.show = true
				} else {
					// this.openUrl('/pagesB/my/personalAssets/personalAssets')
				this.openUrl('/pagesA/application/humanRecords/humanRecords')
				}
			},
			owner() {
				if (this.loginId=='') {
					this.show = true
				} else {
					// this.openUrl('/pagesB/my/personalAssets/personalAssets')
				this.openUrl('/pagesA/application/ownerInformation/ownerInformation')
				}
			},
			tenant() {
				if (this.loginId=='') {
					this.show = true
				} else {
					// this.openUrl('/pagesB/my/personalAssets/personalAssets')
				this.openUrl('/pagesA/application/applicationTenant/applicationTenant')
				}
			},
			visitor() {
				if (this.loginId=='') {
					this.show = true
				} else {
					// this.openUrl('/pagesB/my/personalAssets/personalAssets')
				this.openUrl('/pagesA/application/visitorInformation/visitorInformation')
				}
			},
			onlineMonitoring() {
				// if (this.loginId=='') {
				// 	this.show = true
				// } else {
				// 	// this.openUrl('/pagesB/my/personalAssets/personalAssets')
				// this.openUrl('/pagesA/application/onlineMonitoring/onlineMonitoring')
				// }
				this.$refs.uToast.show({
					title: '该功能暂未开放',
				})
			},
			earlyWarning() {
				if (this.loginId=='') {
					this.show = true
				} else {
					// this.openUrl('/pagesB/my/personalAssets/personalAssets')
				this.openUrl('/pagesA/application/earlyWarning/earlyWarning')
				}
			},
			decoration() {
				if (this.loginId=='') {
					this.show = true
				} else {
					// this.openUrl('/pagesB/my/personalAssets/personalAssets')
				this.openUrl('/pagesA/application/decoration/decoration')
				}
			},
			itemBorrowing() {
				if (this.loginId=='') {
					this.show = true
				} else {
					// this.openUrl('/pagesB/my/personalAssets/personalAssets')
				this.openUrl('/pagesA/application/itemBorrowing/itemBorrowing')
				}
			},
			goOut() {
				if (this.loginId=='') {
					this.show = true
				} else {
					// this.openUrl('/pagesB/my/personalAssets/personalAssets')
				this.openUrl('/pagesA/application/goOut/goOut')
				}
			},
			// 通知公告
			Notice() {
				if (this.loginId=='') {
					this.show = true
				} else {
					// this.openUrl('/pagesB/my/personalAssets/personalAssets')
				// this.openUrl('/pagesA/application/announcement/announcement')
				this.openUrl('/pagesA/application/communityActivities/communityActivities')
				}
			},
			// 社区活动
			activities() {
				if (this.loginId=='') {
					this.show = true
				} else {
					// this.openUrl('/pagesB/my/personalAssets/personalAssets')
					this.openUrl('/pagesA/application/announcement/announcement')
				// this.openUrl('/pagesA/application/communityActivities/communityActivities')
				}
			},
			member() {
				if (this.loginId=='') {
					this.show = true
				} else {
					// this.openUrl('/pagesB/my/personalAssets/personalAssets')
				this.openUrl('/pagesA/application/memberActivities/memberActivities')
				}
			},
			building() {
				if (this.loginId=='') {
					this.show = true
				} else {
					// this.openUrl('/pagesB/my/personalAssets/personalAssets')
				this.openUrl('/pagesA/application/buildingInformation/buildingInformation')
				}
			},
			getcoursetype() { //课程分类
				// this.$http.get('common/getImgCaptcha',{}).then(res => {
				// 	console.log(res, '课程分类')
				// 	uni.setStorageSync('userType', res.code);
				// 	console.log(res.code)
				// })
				this.loginId  = uni.getStorageSync("setModel")
			},
			// 点击确认按钮时触发
			confirm() {
				this.openUrl('/pagesB/sign/sign')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.application_container {
		.mail_two {
			overflow: hidden;
			width: 100%;
			height: 174rpx;
			background-color: #ffffff;

			// background-color: blue;
			.mail_text {
				margin-left: 50rpx;
				margin-top: 96rpx;
				color: #000000;
				font-size: 40rpx;
			}
		}

		.topBox {
			display: flex;
			justify-content: space-around;
			position: absolute;
			top: 260rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 90%;
			height: 153rpx;
			border-radius: 18rpx;
			background-color: #ffffff;
			box-shadow: 0 0 10rpx 5rpx #ccc;

			.notice {
				width: 100rpx;
				height: 102rpx;
				margin: auto 0;
				// background-color: yellow;
			}
		}

		.property {
			display: flex;
			justify-content: space-between;
			width: 400rpx;
			height: 93rpx;
			margin: 30rpx 0 0 37rpx;

			.monitor {
				text-align: center;
			}
		}

		.information_service {
			display: flex;
			justify-content: space-around;
			margin: 30rpx 0 0 16rpx;

			.owner {
				.owner_picture {
					text-align: center;
				}

				.owner_text {}
			}
		}

		.management {
			display: flex;
			justify-content: space-between;
			width: 460rpx;
			margin: 30rpx 0 0 37rpx;

			image {
				width: 220rpx;
				height: 100rpx;
			}
		}
	}
</style>
